<!--
 * @Author: chen qi
 * @Date: 2022-07-08 14:13:32
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-11 15:07:36
 * @Description:
-->
<template>
  <div
    class="border-box"
    :style="{
    boxShadow,
    border
  }"
    @contextmenu="showMenu"
  >
    <!-- 4个边角 -->
    <template>
      <span class="angle"></span>
      <span class="angle"></span>
      <span class="angle"></span>
      <span class="angle"></span>
    </template>
    <slot></slot>
    <contextMenu
      v-show="showContextMenu"
      :axis='axis'
    ></contextMenu>
  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          boxShadowColor: 'rgba(14,124,255,.2)',
          border: `2.5px solid #033070`
        }
      }
    }
  },
  name: 'borderBox',
  mixins: [commonMixin],
  data() {
    return {
      axis: {
        x: null,
        y: null
      },
      showContextMenu: false
    }
  },
  methods: {
    showMenu() {
      event.preventDefault()
      var x = event.offsetX
      var y = event.offsetY
      this.axis = {
        x, y
      }
      this.showContextMenu = true
    },
    closeMenu() {
      this.showContextMenu = false
    }
  },
  watch: {
    showContextMenu: {
      handler(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      }
    }
  },
  computed: {
    boxShadow() {
      return `0 0 5px 5px ${this.options.boxShadowColor},0 0 65px 5px ${this.options.boxShadowColor} inset`
    },
    border() {
      return this.options.border
    }
  }
}
</script>

<style lang="less" scoped>
.border-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(12, 17, 58, 1);
  & > .angle:nth-child(1),
  .angle:nth-child(2),
  .angle:nth-child(3),
  .angle:nth-child(4) {
    position: absolute;
    padding: 7px;
    border-style: solid;
    border-color: #0069dd;
  }
  & > .angle:nth-child(1) {
    left: -2.5px;
    top: -2.5px;
    border-width: 4.5px 0 0 4.5px;
  }

  & > .angle:nth-child(2) {
    right: -2.5px;
    top:-2.5px;
    border-width:4.5px 4.5px 0 0;
  }

  & > .angle:nth-child(3) {
    right: -2.5px;
    bottom:-2.5px;
    border-width: 0 4.5px 4.5px 0;
  }

  & > .angle:nth-child(4) {
    left:-2.5px;
    bottom:-2.5px;
    border-width: 0 0 4.5px 4.5px;
  }
}
</style>
